<script setup lang="ts">
import { h, render } from 'vue'
import Message from '@/components/message/index'
import messageVue from '@/components/message/message.vue'
// 将来想要控制某个结构的显示于隐藏

// 1. h函数:
// h函数劣势: 如果这个结构比较复杂, 用h函数极其复杂
// 优势: 如果结构简单, h函数非常灵活!!! 控制显示隐藏

// 2. template提前写结构,
// 如果说结构简单, 很麻烦(先写好结构, 提供数据, 控制数据)
// 如果结构复杂, template提前写结构就比较友好了
const showMore = () => {
  // 动态创建一个结构(h) 插入box(render)
  // flag.value = true
  // h函数 是一个动态创建虚拟dom的函数
  // <h1>我是一个大标题</h1>
  // h(创建的元素名， 属性，子节点)
  // calss属性=> className
  const span1 = h('span', {}, '我是span1')
  const span2 = h('span', {}, '我是span2')

  const vNode = h(
    'h1',
    {
      id: 'ddd',
      className: 'xxx',
    },
    // '我是一个大标题!!'
    [span1, span2]
  )

  // render 是一个将虚拟dom渲染到指定挂载点的函数
  // render(虚拟dom, 挂载点)
  render(vNode, document.querySelector('.box')!)
}

// const show = () => {
//   // 动态创建消息提示组件, 插入页面
//   const vNode = h(
//     XtxMessage,
//     {
//       type: 'warning',
//     },
//     '123'
//   )

//   render(vNode, document.querySelector('.box')!)
// }

const show = () => {
  // Message({
  //   type: 'success',
  //   text: '登录成功',
  //   duration: 3000,
  // })

  // 函数是个复杂类型, 对象
  Message.success('登录成功')
}
</script>

<template>
  <div>演练场</div>
  <button @click="show">登录</button>
  <div class="box"></div>
</template>
<style scoped></style>
